<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="fa fa-bars"></i> 商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="handle-box">
			<!--<Blockquote>
				<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addAttribute"></el-button>
			</Blockquote>-->
		</div>
		<div class="container">
			<el-table :data="tableData" Checkbox border style="width: 100%" fit ref="multipleTable">
				<el-table-column prop="orderSN" label="序号" width="30" type="index">
				</el-table-column>
				<el-table-column prop="userId" label="下单时间"  width="105">
					<template slot-scope="scope"  >
						<!-- {{scope.row.createTime}} -->
						{{moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}
					</template>	
				</el-table-column>
				<el-table-column label="缩略图" width="80">
					<template slot-scope="scope">
						<img class="thumbnail" :src="imgUrl+scope.row.thumbnail" >
					</template>
					<!-- <template slot-scope="scope">
						<el-tag v-if="scope.row.order_status==1" size="small"> 待付款 </el-tag>
						<el-tag v-else-if="scope.row.order_status==2" size="small"> 待发货 </el-tag>
						<el-tag v-else-if="scope.row.order_status==3" size="small"> 已发货 </el-tag>
						<el-tag v-else-if="scope.row.order_status==4" size="small"> 已完成 </el-tag>
						<el-tag v-else-if="scope.row.order_status==5" size="small"> 申请退款 </el-tag>
						<el-tag v-else-if="scope.row.order_status==6" size="small"> 退款成功 </el-tag>
						<el-tag v-else-if="scope.row.order_status==7" size="small"> 已取消 </el-tag>
					</template> -->
				</el-table-column>
				<el-table-column prop="totalPrice" label="主打商品名称" width="80">
						<template slot-scope="scope">
                            <span v-html="scope.row.Name" ></span>
                        </template>
				</el-table-column>
				<el-table-column prop="payFee" label="订单号" width="150">
						<template slot-scope="scope">
                            <span v-if="scope.row.orderNo">
								<router-link :to="{ path:'/orderDetail?id='+scope.row.id}">{{scope.row.orderNo}}</router-link>
							</span>
                        </template>
				</el-table-column>
				<el-table-column prop="payFee" label="款式数" width="80">
						<template slot-scope="scope">
                            <span >{{scope.row.styleNumber}}</span>
                        </template>
				</el-table-column>
				<el-table-column prop="createTime" label="单价" width="100">
						<template slot-scope="scope">
                            <span >{{scope.row.price}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="采购金额" >
						<template slot-scope="scope">
                            <span >{{scope.row.purchasePrice}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="交货省" >
						<template slot-scope="scope">
                            <span >{{scope.row.province}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="交货市" >
						<template slot-scope="scope">
                            <span >{{scope.row.city}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="付款时间"  width="105">
						<template slot-scope="scope">
                            <span v-if="scope.row.paymentTime">{{moment(scope.row.paymentTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                            <span v-else>买家待付款</span>
                        </template>
				</el-table-column>
				<el-table-column  label="发货时间"  width="105" >
						<template slot-scope="scope">
                            <span v-if="scope.row.deliveryTime">{{moment(scope.row.deliveryTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
							<span v-else>
								<el-button type="primary"  @click="dialogField(scope.$index)" >填写单号
								</el-button>
							</span>
                        </template>
				</el-table-column>
				<el-table-column  label="收货时间" width="105" >
						<template slot-scope="scope">
                            <span v-if="scope.row.receivingTime">{{moment(scope.row.receivingTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="收款时间" width="105" >
						<template slot-scope="scope">
                            <!-- <span >{{scope.row.receivingTime}}</span> -->
                        </template>
				</el-table-column>
				<el-table-column  label="评价时间" width="105" >
						<template slot-scope="scope">
                            <span v-if="scope.row.commentTime">{{moment(scope.row.commentTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="取消时间" width="105"  >
						<template slot-scope="scope">
                            <span v-if="scope.row.cancelTime">{{moment(scope.row.cancelTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="银行流水号" >
						<template slot-scope="scope">
                            <span >{{scope.row.payNo}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="退款时间" width="105">
						<template slot-scope="scope">
                            <span v-if="scope.row.returnTime">{{moment(scope.row.returnTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="退款金额" >
						<template slot-scope="scope">
                            <span >{{scope.row.refundablePrice}}</span>
                        </template>
				</el-table-column>
				<el-table-column  label="异常通知" >
						<template slot-scope="scope">
                            <!-- <span >{{scope.row.purchasePrice}}</span> -->
                        </template>
				</el-table-column>
				<!-- <el-table-column label="操作" width="220">
					<template slot-scope="scope">
						<a href="javascript:;" @click="fahuo(scope.$index, scope.row)"> <i class="el-icon-edit-outline"></i>发货 </a>
						<a href="javascript:;" @click="tuikuan(scope.$index, scope.row)"> <i class="fa fa-plus"></i>退款 </a>
					</template>
				</el-table-column> -->
			</el-table>
			<el-dialog title="填写信息" :visible.sync="dialogFieldVisible" width="500px">
				<el-form :model="attribute" label-width="100px" ref="form">
					<el-form-item label="物流公司" prop="logisticsCompany" >
						<el-input v-model="logisticsCompany" placeholder="填写物流公司"></el-input>
					</el-form-item>
					<el-form-item label="订单号" prop="logisticsNumber" >
						<el-input v-model="logisticsNumber" placeholder="填写订单号"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFieldVisible = false">取 消</el-button>
					<el-button type="primary" @click="deliverForm('form')">确 定</el-button>
				</div>
			</el-dialog>
		
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				tableData: [],
				attribute: {},
				attributeValue: {},
				dialogFieldVisible:false,
				orderPage: {
					pageNumber: 1,
					pageSize: 10
				},
				logisticsCompany:'',
				logisticsNumber:'',
				id:'',
			}
		},
		methods: {
			getData() {
				this.$axios.get('/one9-web/order/list?currPage='+this.orderPage.pageNumber).then((res) => {
				if(res.code="OK")
					this.tableData =res.data.records;
					// console.log(this.tableData)
				})
			},
			fahuo(){},
			tuikuan(){},
			deliverForm(){
				const Qs = require("qs");
				this.$axios.post('/one9-web/order/deliverGoods',Qs.stringify({"logisticsCompany":this.logisticsCompany,'logisticsNumber':this.logisticsNumber,id:this.id})).then(res=>{
					if(res.code='OK'){

					}
				})
			},
			dialogField(index){
				 let goodids = this.tableData.map(item => item.id).toString();
				let arrids = goodids.split(",");
				this.dialogFieldVisible=true;
				this.id=arrids[index];
			}

	},
	created: function() {
		this.getData();
	},
	}
</script>

<style scoped>
	.icon {
		width: 50px;
		height: 50px;
	}
	
	.el-tag {
		margin: 2px 5px 2px 0;
	}
</style>